<!-- 普通执法仪注册 -->
<template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" :can-add="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
        <Col span="3"><Input :placeholder="$t('code')" v-model="queryParam.where.code" maxlength=20></Input> </Col>
        <Col span="3"><Input :placeholder="$t('name')" v-model="queryParam.where.name" maxlength=100></Input> </Col>
        <Col span="3"><OrganizationTree v-model="queryParam.where.orgId" width="200px"></OrganizationTree> </Col>
        <Col span="3"><UserSelect ref="srhUserSelect" v-model="queryParam.where.userId"
                       :srhValue="queryParam.where.userName" width="200px">
            </UserSelect> </Col>
<!--        <Col span="1"><Button type="primary" icon="ios-search" @click="getData">查询</Button></Col>-->
      </Row>
    </SearchHeader>
    <Card>
      <Table border :columns="columns" :data="tableData">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default" :disabled="!canModify" :Title="$t('delete')" icon="md-trash" @click="remove(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="state">
          <span v-if="row.state==1" style="color: green" >{{$t('device_status_1')}}</span>
          <span v-if="row.state==2" style="color: #ed4014" >{{$t('device_status_2')}}</span>
          <span v-if="row.state==3" style="color: #BB5E26" >{{$t('device_status_3')}}</span>
        </template>
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
    </Card>
    <Modal v-model="modal.show" :loading="modal.loading" :title="$t('add')"  @on-ok="save"  @on-cancel="modal.cancel">
      <!-- footer-hide="false" -->
      <Form :model="rowData" label-position="right" :label-width="80">
        <FormItem :label="$t('code')" ><Input v-model="rowData.code" :readonly="modal.readonly" maxlength=20></Input></FormItem>
        <FormItem :label="$t('name')"><Input v-model="rowData.name" :readonly="modal.readonly" maxlength=100></Input></FormItem>
        <FormItem :label="$t('device_status')"> <RadioGroup v-model="rowData.stateStr" :readonly="modal.readonly">
          <Radio :label="$t('device_status_1')" border></Radio>
          <Radio :label="$t('device_status_2')" border></Radio>
          <Radio :label="$t('device_status_3')" border></Radio>
        </RadioGroup></FormItem>
        <FormItem :label="$t('organization')">
          <OrganizationTree v-model="rowData.orgId" width="200px"></OrganizationTree>
        </FormItem>
        <FormItem :label="$t('personnel')">
          <UserSelect ref="edtUserSelect" v-model="rowData.userId"
                      v-bind:srhValue="rowData.userName" width="200px"
                      :readonly="modal.readonly"></UserSelect>
        </FormItem>
      </Form>
    </Modal>
    <DeviceCommonEdit ref="deviceCommonEdit"></DeviceCommonEdit>
  </div>
</template>
<script>
import Device from '@/api/Device';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import OrganizationTree from '@/components/topnav/OrganizationTree';
import UserSelect from '@/components/topnav/UserModelSelect';
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import DeviceCommonEdit from "@/view/Device/DeviceCommonEdit";
import {apiResult, clone} from '@/libs/util'
import AuthCheck from "@/api/AuthCheck";
export default {
  name: 'DeviceCommon',
  components: {Treeselect,OrganizationTree,UserSelect,TopnavPage,SearchHeader,DeviceCommonEdit},
  computed:{
    columns(){
      return [
        {title: this.$t('operate'), key: 'action', width: 180,slot: 'action',align: 'center'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 200},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: this.$t('personnel'), key: 'userName', sortable: true, width: 150},
        {title: this.$t('organization'), key: 'shortName', sortable: true, width: 150},
        {title: this.$t('device_status'), key: 'state', sortable: true, width: 100,slot: 'state'},];
    }
  },
  data () {
    return {
      canModify:false,
      api: new Device(),
      modal:{

        show: false,
        loading: false,
        title: '',
        readonly: false,
        action: null,// view,add,edit
        cancel:()=>{
          this.modal.show =false;
          this.modal.loading = false;
        },
        afterSave:(res)=>{
          apiResult(res.data,true,result=>{
            this.getData();
            this.modal.show = false;
          },err=>{
            this.modal.loading = false;
            setTimeout(() => {
              this.modal.loading = true;
              this.modal.show = true;
            }, 1000);
          })
        },
      },
      rowData: {
        id: null,
        code: null,
        name: null,
        type: 2,
        orgId: null,
        userId: null,
        gbServerId: null,
        defaultChannel: null,
        defaultAlarmChannel: null,
        state: 1,
        stateStr: '',
      },
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
          userName: null,
        },
        where: {keyword:null,code: null, name: null, cate: 1, orgId: null, userId: null,state:null},
        init:()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          this.queryParam.where.type=1;
          this.queryParam.where.orgId=null;
          this.queryParam.where.userId=null;
          this.queryParam.where.gbServerId=null;
          this.queryParam.where.state=null;
        }
      },

      tableData: []
    }
  },
  methods: {
    save(){
      if (this.rowData.stateStr == this.$t('device_status_1')){this.rowData.state=1;}
      else if (this.rowData.stateStr == this.$t('device_status_2')){this.rowData.state=2;}
      else if (this.rowData.stateStr == this.$t('device_status_3')){this.rowData.state=3;}
      /** 新增 */
      if (this.rowData.id == null){
        this.api.addDevice(JSON.stringify(this.rowData)).then(res => {this.modal.afterSave(res);})
      }else{
        this.api.updateDevice(JSON.stringify(this.rowData)).then(res => {this.modal.afterSave(res);})
      }
    },

    getData() {
      /** 生成查询条件 */
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
          apiResult(res.data,false,result=>{
            this.tableData = result.data.records;
          })
      })
    },
    changePage() {this.getData()},
    initRowData(row){
      if(!!row){
        this.rowData.state=row.state;
        if (this.rowData.state==1){this.rowData.stateStr = this.$t('device_status_1');}
        else if (this.rowData.state==2){this.rowData.stateStr = this.$t('device_status_2');}
        else if (this.rowData.state==3){this.rowData.stateStr = this.$t('device_status_3');}
        this.rowData.id=row.id;
        this.rowData.code=row.code;
        this.rowData.name=row.name;
        this.rowData.type=1; //4G
        this.rowData.orgId=row.orgId;

        this.rowData.userId=row.userId;
        this.rowData.userName=row.userName;
        this.rowData.gbServerId=row.gbServerId;
        this.rowData.defaultChannel=row.defaultChannel;
        this.rowData.defaultAlarmChannel=row.defaultAlarmChannel;
      }else{
        this.rowData.state=1;
        this.rowData.stateStr = this.$t('device_status_1');
        this.rowData.id=null;
        this.rowData.code=null;
        this.rowData.name=null;
        this.rowData.type=1; //4G
        this.rowData.orgId=null;
        this.rowData.userId=null;
        this.rowData.userName=null;
        this.rowData.gbServerId=null;
        this.rowData.defaultChannel=null;
        this.rowData.defaultAlarmChannel=null;
      }
    },
    view(row){
      this.$refs.deviceCommonEdit.openDialog("VIEW",clone(row), null);
    },
    add(){
      this.$refs.deviceCommonEdit.openDialog("ADD",null, this.getData);
    },
    edit(row){
      this.$refs.deviceCommonEdit.openDialog("EDIT",clone(row), this.getData);
    },
    remove (row) {
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          this.api.removeDevice(JSON.stringify(row)).then(res=>{
            apiResult(res.data,true,result=>{
              this.getData();
            })
          })
        },
        onCancel: () => {}
      });
    }
  },
  mounted(){
    this.canModify = new AuthCheck().standAloneDevRegEdit();
    this.getData();
  }
}
</script>
<style>
.column-lb-primary {
  color: #fff;
  background-color: #2d8cf0;
  border-color: #2d8cf0;
}
.column-lb-small {
  padding: 1px 7px 2px;
  font-size: 12px;
  border-radius: 3px;
}
</style>
<style lang="less">
  //@import "../../my-theme/template";
</style>
